<div class="container mt-4">
  <div class="row" id="post-list">
    <!-- JS 渲染帖子 -->
  </div>

  <!-- 悬浮按钮 -->
  <button
    id="create-post-btn"
    class="btn btn-primary rounded-circle position-fixed shadow"
    style="
      bottom: 80px;
      right: 30px;
      width: 60px;
      height: 60px;
      font-size: 28px;
      z-index: 999;
    "
  >
    +
  </button>

  <!-- 发布弹窗 -->
  <div
    id="post-modal"
    class="modal d-none position-fixed top-0 start-0 w-100 h-100 bg-dark bg-opacity-50 d-flex justify-content-center align-items-center"
    style="z-index: 1050"
  >
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content p-4" style="min-width: 400px">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h5 class="mb-0">发布新帖子</h5>
          <button type="button" class="btn-close" id="cancel-post"></button>
        </div>
        <div class="mb-3">
          <input
            type="text"
            class="form-control"
            id="post-title"
            placeholder="标题"
          />
        </div>
        <div class="mb-3">
          <textarea
            class="form-control"
            rows="4"
            id="post-content"
            placeholder="写点什么吧..."
          ></textarea>
        </div>
        <div class="mb-3">
          <!-- 新增图片上传选择 -->
          <label for="post-image" class="form-label">选择图片 (可选)</label>
          <input
            type="file"
            class="form-control"
            id="post-image"
            accept="image/*"
          />

          <!-- 添加图片预览的 img 标签 -->
          <img
            id="image-preview"
            class="img-fluid rounded mb-2"
            alt="Image preview"
          />
        </div>
        <button class="btn btn-primary w-100" id="submit-post">发布</button>
      </div>
    </div>
  </div>
</div>
